<template>
	<div class="lianghao">
		<top></top>
		<div class="center">
			<left></left>
			<div class="right" v-loading="loading">
				<div class="flex" style="background: #F9F9F9; position: relative;">
					<!-- <div style="position: absolute; right: 20px; top: 20px; color: #f00; font-weight: bold;">返回{{moban.platform_name}}系统
					</div> -->
					<div
						style="width: 180px; background: #FFFFFF; border-top: 3px #f00 solid; line-height: 50px; text-align: center; cursor: pointer; font-weight: bold;">
						销售中的号码</div>
					<div @click="go('/lianghaoxiajia')"
						style="width: 180px; background: #F9F9F9; border-top: 3px #F9F9F9 solid; line-height: 50px; text-align: center; cursor: pointer; font-weight: bold;">
						已下架的号码</div>
				</div>
				<div style="background: #EFEFEF; height: 20px; width: 100%;"></div>
				<div class="add flex" style="flex-wrap: wrap;">
					<el-input v-model="all.number" style="width: 160px; margin-right: 10px; " v-on:keyup.enter.native="search" placeholder="号码">
					</el-input>
					<el-input v-model="all.province" style="width: 160px; margin-right: 10px; " v-on:keyup.enter.native="search" placeholder="归属地省">
					</el-input>
					<el-input v-model="all.city" style="width: 160px; margin-right: 10px; " v-on:keyup.enter.native="search" placeholder="归属地市">
					</el-input>
					<el-input v-model="all.operator" style="width: 160px; margin-right: 10px; " v-on:keyup.enter.native="search" placeholder="运营商">
					</el-input>
					<el-input v-model="all.brand" style="width: 160px; margin-right: 10px; " v-on:keyup.enter.native="search" placeholder="卡品牌">
					</el-input>
					<el-select v-model="all.great_type" style="width: 160px; margin-right: 10px;" filterable clearable placeholder="规律">
						<el-option v-for="(item,index) in guilvlist" :key="index" :label="item" :value="item"></el-option>
					</el-select>
				</div>
				<div class="add flex" style="flex-wrap: wrap; margin-top: 0; padding-top: 0;">
					<el-input v-model="all.sku" style="width: 160px; margin-right: 10px; " v-on:keyup.enter.native="search" placeholder="产品编码">
					</el-input>
					<el-select v-model="all.saled" style="width: 160px; margin-right: 10px;" filterable clearable placeholder="销售状态">
						<el-option label="正常" value="0"></el-option>
						<el-option label="已售" value="1"></el-option>
						<el-option label="预占" value="-1"></el-option>
					</el-select>
					<el-input v-model="all.sale_price_start" style="width: 100px; margin-right: 10px; "  placeholder="指导价低">
					</el-input>
					<div style="line-height: 36px; margin-right: 10px;">——</div>
					<el-input v-model="all.sale_price_end" style="width: 100px; margin-right: 10px; " v-on:keyup.enter.native="search" placeholder="指导价高">
					</el-input>
					<el-input v-model="all.guiding_price_start" style="width: 100px; margin-right: 10px; " placeholder="底价低">
					</el-input>
					<div style="line-height: 36px; margin-right: 10px;">——</div>
					<el-input v-model="all.guiding_price_end" style="width: 100px; margin-right: 10px; " v-on:keyup.enter.native="search" placeholder="底价高">
					</el-input>
					<!-- <el-input v-model="all.sku" style="width: 160px; margin-right: 10px; " placeholder="生产渠道">
					</el-input> -->

					<el-button type="primary" size="small" @click="search">搜索</el-button>
				</div>
					<!-- <el-button @click="daoru1" size="small" type="primary">{{name1}}</el-button>
					<el-button @click="xiazai1" type="text" size="small">下载导入模板</el-button>
					<el-button @click="shanchu1" size="small" type="danger">删除值班数据</el-button>
					<el-button @click="daoru2" size="small" type="primary">{{name2}}</el-button>
					<el-button @click="xiazai2" type="text" size="small">下载导入模板</el-button>
					<el-button @click="shanchu2" size="small" type="danger">删除直播订单数据</el-button> -->

				<div class="add flex" style="padding: 0 20px; justify-content: flex-start;">
					<upload-excel-component @on-selected-file="exportData" class="btnp" buttonName="导入号码">
					</upload-excel-component>
					<el-button @click="xiazai1" type="text" size="small">下载导入号码模板</el-button>
					<upload-excel-component @on-selected-file="exportData" class="btnp" buttonName="导入下架">
					</upload-excel-component>
					<el-button @click="xiazai2" type="text" size="small">下载导入下架模板</el-button>
          <upload-excel-component @on-selected-file="exportData" class="btnp" buttonName="导入删除">
          </upload-excel-component>
          <el-button @click="xiazai4" type="text" size="small">下载导入删除模板</el-button>
				</div>

				<div class="con" style="margin-top: 20px;">
					<el-table :data="tableData" style="text-align: center;" align="center" border :loading="loading" >
						<!-- <el-table-column label="ID" >
							<template slot-scope="scope">
								<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column> -->
						<el-table-column label="号码">
							<template slot-scope="scope">
								<span>{{ scope.row.number }}</span>
							</template>
						</el-table-column>

						<el-table-column label="归属地省">
							<template slot-scope="scope">
								<span>{{ scope.row.province }}</span>
							</template>
						</el-table-column>
						<el-table-column label="归属地市">
							<template slot-scope="scope">
								<span>{{ scope.row.city }}</span>
							</template>
						</el-table-column>

						<el-table-column label="运营商" >
							<template slot-scope="scope">
								<span>{{ scope.row.operator }}</span>
							</template>
						</el-table-column>
						<el-table-column label="供应商">
							<template slot-scope="scope">
								<span>{{ scope.row.supplier }}</span>
							</template>
						</el-table-column>
						<!-- <el-table-column label="靓号类型">
							<template slot-scope="scope">
								<span>{{scope.row.great_type}}</span>
							</template>
						</el-table-column> -->
						<el-table-column label="卡品牌">
							<template slot-scope="scope">
								<span>{{ scope.row.brand }}</span>
							</template>
						</el-table-column>

						<el-table-column label="产品编码">
							<template slot-scope="scope">
								<span>{{ scope.row.sku }}</span>
							</template>
						</el-table-column>
						<el-table-column label="指导价" width="100" sortable prop="guiding_price" >

						</el-table-column>
						<el-table-column label="销售底价" width="110" sortable prop="sale_price" >

						</el-table-column>
						<el-table-column label="进货价" width="100" sortable prop="base_price"  >

						</el-table-column>
						<el-table-column label="销售状态" >
							<template slot-scope="scope">
								<span v-if="scope.row.saled == 1">已售出</span>
							</template>
						</el-table-column>

						<el-table-column label="入库时间">
							<template slot-scope="scope">
								<span>{{ scope.row.created_at }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" @click="go2('/lianghaoxiangqing',scope.row.id)">查看</el-button>
								<!-- <el-button type="text" @click="gaijia(scope.row.id)">改价</el-button> -->
								<el-button type="text"  v-if="scope.row.saled != 1" @click="chakan(scope.row.id)">查看改价</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination background layout="total,prev, pager, next" :current-page="all.page"
						@current-change="fanye" :page-size="all.pagesize" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<el-dialog title="导入失败" :visible.sync="log" width="440px">
			<div v-for="(item,index) in shibailist" :key="index">{{item}}</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log = false">知道了</el-button>
			</span>
		</el-dialog>
		<el-dialog title="改价详情" :visible.sync="gaijiaxiangqinglog" width="440px">
			<div v-for="(item,index) in gaijialist" :key="index" style="font-size: 14px; margin-bottom: 0.2rem;">
				<span style="margin-right: 10px;">{{item.operator_name}}</span><span style="margin-right: 10px;">{{item.created_at}}</span>改价{{item.price}}元
			</div>
			<div style="margin-top: 30px;">
			  <el-input placeholder="输入价格" v-model="jiage.price"></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
						  <el-button @click="gaijiaxiangqinglog = false">关闭</el-button>
			  <el-button type="primary" @click="gaijiago">确定</el-button>
			</div>
		</el-dialog>

		<!-- <foot></foot>
		<notice></notice> -->
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	import notice from '@/components/notice.vue'
	import moment from "moment";
	import UploadExcelComponent from "@/components/UploadExcel/index.vue";
	export default {
		components: {
			left,
			top,
			foot,
			notice,
			UploadExcelComponent
		},
		name: 'lianghao',
		data() {
			return {
				gaijiaxiangqinglog:false,
				gaijialist:"",
				jiage:{
					number_id:"",
					price:""
				},
				guilvlist:[
					'AAA','AAAA','AAAAA','AAAAAA','ABC','ABCD','ABCDE','AAAAB','AAAAAB','AABB','AABBCC','AAABBB','ABAB','ABABAB','ABCDABCD','AABBB','AABBCCDD','ABCDE','AAABBBB','AABBCCCC','ABABCCCC','AABBCCDD'
				],
				all: {
					status:100,
					pagesize: 20,
					page: 1,
					province: "",
					city: "",
					operator: "",
					brand: "",
					sku: "",
					number: "",
					great_type:"",
					saled:"",
					sale_price_start:"",
					sale_price_end:"",
					base_price_start:"",
					base_price_end:"",
					guiding_price_start:"",
					guiding_price_end:""
				},
				tableData: "",
				name1: "导入号码",
				name2: "导入直播订单表",
				name3: "",
				msg: "hello",
				loading: false,
				log: false,
				disid: "",
				result: "",
				list: "",
				total: 0,

				time: "",
				time1: "",
				url: "",
				shangchuanshuju: "",
				shangchuanleibie: 0,
				shangchuanzhong: false,
				shibailist:""
			}
		},
		created() {

			this.time = moment().format("YYYY-MM");
			this.time1 = moment().format("YYYY-MM");
			this.getlist();

		},

		methods: {
			chakan:function(id){
				this.jiage.number_id = id
				this.jiage.price = ''
				axios.get('/api/plan-market/great/price/changes?page=1&page_size=20&id='+id)
					.then(response => {
						if (response.data.msg.code == 0) {
							this.gaijialist = response.data.data.data
							this.gaijiaxiangqinglog = true
						} else {
							this.$message.error(response.data.msg.info);
						}

					})

			},
			gaijia:function(id){
				this.jiage.number_id = id

				this.gaijialog = true
			},
			gaijiago:function(){
				axios.post('/api/plan-market/great/price/change2',this.jiage)
					.then(response => {
						if (response.data.msg.code == 0) {
							this.$message.success("改价成功");
							this.getlist()
							this.gaijiaxiangqinglog = false
						} else {
							this.$message.error(response.data.msg.info);
						}

					})
			},
			search:function(){
				this.all.page = 1
				this.getlist()
			},
			go:function(url){
				this.$router.push(url)
			},
			go2:function(url,id){
				this.$router.push({
					path:url,
					query:{
						id:id
					}
				})
			},
			shanchu1: function(id) {
				var that = this;
				axios.post('/great/number/delete',{id:id})
					.then(response => {
						if (response.data.msg.code == 0) {
							this.$message.success("删除成功");
							this.getlist()
						} else {
							that.$message.error(response.data.msg.info);
						}

					})
			},
			shanchu2: function() {
				var that = this;
				axios.post('/api/tool/broadorders/delete')
					.then(response => {
						this.getlist()
					})
			},
			daoru1: function() {
				this.name3 = '导入值班数据'
				this.shangchuanleibie = 1
				this.log = true
			},
			daoru2: function() {
				this.name3 = '导入直播订单表'
				this.shangchuanleibie = 2
				this.log = true
			},
			changetime: function() {
				this.getlist()
			},
			xiazai1: function() {
				const a = document.createElement('a');
				a.setAttribute('download', '靓号导入模板.xlsx');
				a.setAttribute('href', this.allurl + 'static/moban/lianghao.xlsx');
				a.click();
			},
			xiazai2: function() {
				const a = document.createElement('a');
				a.setAttribute('download', '靓号导入下架模板.xlsx');
				a.setAttribute('href', this.allurl + 'static/moban/lianghaoxiajia.xlsx');
				a.click();
			},
      xiazai4: function() {
      	const a = document.createElement('a');
      	a.setAttribute('download', '靓号导入删除模板.xlsx');
      	a.setAttribute('href', this.allurl + 'static/moban/lianghaoshanchu.xlsx');
      	a.click();
      },
			xiazai3: function(name) {
				var that = this
				axios.get("/api/tool/broadorders/export?name=" + name + "&month=" + this.time)
					.then(function(response) {
						if (response.data.msg.code == 0) {
							window.location.href = window.location.origin + '/' + response.data.data
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			exportData: function(data) {
				var that = this;
				var list = []
				//导入
				if (data.header[0] == "靓号号码") {
					for (let m in data.results) {
						let obj = {}
						if (data.results[m]['靓号号码']) {
							obj['number'] = (data.results[m]['靓号号码']).toString().trim()
						}
						if (data.results[m]['归属地省']) {
							obj['province'] = data.results[m]['归属地省'].toString().trim()
						}
						if (data.results[m]['归属地市']) {
							obj['city'] = data.results[m]['归属地市'].toString().trim()
						}
						if (data.results[m]['运营商']) {
							obj['carrier'] = data.results[m]['运营商'].toString().trim()
						}
						if (data.results[m]['使用网络']) {
							obj['operator'] = data.results[m]['使用网络'].toString().trim()
						}
						if (data.results[m]['供应商']) {
							obj['supplier'] = data.results[m]['供应商'].toString().trim()
						}
						if (data.results[m]['卡品牌']) {
							obj['brand'] = data.results[m]['卡品牌'].toString().trim()
						}
						if (data.results[m]['产品编码']) {
							obj['sku'] = data.results[m]['产品编码'].toString().trim()
						}
						if (data.results[m]['指导价']) {
							obj['guiding_price'] = data.results[m]['指导价'].toString().trim()
						}
						if (data.results[m]['销售底价']) {
							obj['sale_price'] = data.results[m]['销售底价'].toString().trim()
						}
						if (data.results[m]['进货价']) {
							obj['base_price'] = data.results[m]['进货价'].toString().trim()
						}
						if (data.results[m]['预存话费']) {
							obj['prepaid'] = data.results[m]['预存话费'].toString().trim()
						}
						if (data.results[m]['最低消费']) {
							obj['min_consume'] = data.results[m]['最低消费'].toString().trim()
						}
						if (data.results[m]['卡含话费']) {
							obj['credit'] = data.results[m]['卡含话费'].toString().trim()
						}
						if (data.results[m]['备注']) {
							obj['remark'] = data.results[m]['备注'].toString().trim()
						}
						if (data.results[m]['套餐']) {
							obj['package'] = data.results[m]['套餐'].toString().trim()
						}
						if (data.results[m]['原价']) {
							obj['base_price'] = data.results[m]['原价'].toString().trim()
						}


						list.push(obj)
					}
					console.log(list)

					axios.post("/api/plan-market/great/numbers/import", {
							data: list
						})
						.then((response) => {
							if (response.data.msg.code == 0) {
								if(response.data.data.error && response.data.data.error != '' ){
									this.shibailist = response.data.data.error
									this.log = true
								}else{
									this.getlist()
								}

							} else {
								this.$message.error(response.data.msg.info);
							}
						})
				}

				if (data.header[0] == "下架号码") {
					for (let m in data.results) {
						let num = (data.results[m]['下架号码']).toString().trim()

						list.push(num)
					}

					axios.post("/api/plan-market/great/numbers/down", {
							data: list
						})
						.then((response) => {
							if (response.data.msg.code == 0) {

								this.getlist()
							} else {
								this.$message.error(response.data.msg.info);
							}
						})
				}
        if (data.header[0] == "删除号码") {
        	for (let m in data.results) {
        		let num = (data.results[m]['删除号码']).toString().trim()

        		list.push(num)
        	}

        	axios.post("/api/plan-market/great/numbers/delete", {
        			data: list
        		})
        		.then((response) => {
        			if (response.data.msg.code == 0) {

        				this.getlist()
        			} else {
        				this.$message.error(response.data.msg.info);
        			}
        		})
        }



				// if (data.header[0] == "外部订单号") {
				// 	console.log(data)
				// 	for (var i = 0; i < data.results.length; i++) {
				// 		list.push(data.results[i]['外部订单号'])
				// 	}
				// 	this.shangchuanshuju = list
				// }

			},
			shangchuan: function() {
				var that = this
				if (this.shangchuanshuju == "") {
					this.$message.error('先上传数据');
					return false
				}
				this.shangchuanzhong = true

				if (this.shangchuanleibie == 1) {
					axios.post("/api/tool/broadtable/import", {
							month: this.time1,
							data: this.shangchuanshuju
						})
						.then(function(response) {
							if (response.data.msg.code == 0) {
								if (response.data.data.errors != "") {
									var cuowu = ""
									for (var i in response.data.data.errors) {
										cuowu = cuowu + response.data.data.errors[i]
									}
									that.$message.error(cuowu);
								} else {
									that.$message.success("导入成功");
								}
								that.shangchuanzhong = false
								that.log = false
								that.getlist()
							} else {
								that.$message.error(response.data.msg.info);
								that.shangchuanzhong = false
							}
						})
				}
				if (this.shangchuanleibie == 2) {
					axios.post("/api/tool/broadorders/import", {
							month: this.time1,
							data: this.shangchuanshuju
						})
						.then(function(response) {
							if (response.data.msg.code == 0) {
								if (response.data.data.errors != "") {
									var cuowu = ""
									for (var i in response.data.data.errors) {
										cuowu = cuowu + response.data.data.errors[i]
									}
									that.$message.error(cuowu);
								} else {
									that.$message.success("导入成功");
								}
								that.shangchuanzhong = false
								that.log = false
								that.getlist()
							} else {
								that.$message.error(response.data.msg.info);
								that.shangchuanzhong = false
							}
						})
				}
				this.getlist();

			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.all.page = page
				this.getlist()
			},

			//获取
			getlist: function() {
				this.loading = true
				axios.get('/api/plan-market/great/numbers', {
						params: this.all
					})
					.then(response => {
						this.total = response.data.data.total
						this.tableData = response.data.data.data
						this.loading = false
					})
			},

		}
	}
</script>
<style>
	.zhibo .el-button--primary {
		color: #FFF !important;
		background-color: #409EFF !important;
		border-color: #409EFF !important;
	}

	.zhibo .el-input__inner {
		line-height: 32px !important;
		height: 32px !important;
	}

	.zhibo .btnp {
		line-height: 32px !important;
		height: 32px !important;
		margin-bottom: 20px;
	}
</style>
<style lang="scss" scoped="scoped">
	.lianghao {
		margin: 0;
		padding: 0;
		background: #EFEFEF;

		/deep/ .el-button--primary {
			background-color: #EEF7FF;
			color: #fff;
			border: 0;
			margin: 0 10px;
		}

		/deep/ .el-table__header th {
			background: #EAEAEA;
		}

		.flex {
			display: flex;
		}

		.center {
			width: 1366px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.right {
				flex-basis: 1166px;
				background: #FFF;

				.title {
					border-bottom: 1px #EAEAEA solid;
					line-height: 45px;
					padding-left: 30px;
					font-size: 16px;
					background: #F9F9F9;
					color: #727272
				}

				.add {
					padding: 20px 30px
				}

				.list {
					display: flex;
					text-align: center;
					color: #727272;
					line-height: 45px;
					margin: 0 20px;
					border: 1px #EAEAEA solid;
					margin-top: -1px;

					.th {
						flex: 1;
						background: #F9F9F9;
						font-size: 14px;
						border-right: 1px #EAEAEA solid;
					}

					.td {
						flex: 1;
						font-size: 14px;
						border-right: 1px #EAEAEA solid;
					}
				}

				.el-pagination {
					text-align: right;
					margin: 20px 0
				}
			}
		}

		.result {
			margin-top: 20px;
		}
	}
</style>
